<template>
  <div>
    <Modal
      v-model="show_modal"
      title="确定清空吗?"
      @on-ok="clear_posted"
      @on-cancel="show_modal = false"
    >
      <p>选择操作</p>
    </Modal>
    <Tabs value="name1" class="margin">
      <!-- 头像+背景图 -->
      <TabPane label="头像+背景图" name="name1">
        <div>
          <Select v-model="model" style="width: 100%" class="padding">
            <Option
              v-for="item in optionList"
              :value="item.value"
              :key="item.value"
              >{{ item.value }}</Option
            >
          </Select>
          <Upload
            class="margin"
            type="drag"
            action="//jsonplaceholder.typicode.com/posts/"
            :before-upload="get_upload"
            accept="image/*"
          >
            <div style="padding: 20px 20px">
              <Icon
                type="ios-cloud-upload"
                size="52"
                style="color: #3399ff"
              ></Icon>
              <p>点击或者拖拽上传</p>
            </div>
          </Upload>
        </div>
      </TabPane>
      <!-- 介绍+随心贴 -->
      <TabPane label="介绍+随心贴" name="name2">
        <DatePicker
          :model-value="set_website_time"
          @on-change="datepicker_change"
          type="date"
          confirm
          placeholder="选择建站日期"
          style="width: -webkit-fill-available; margin: 10px"
        />

        <Input
          class="padding"
          v-model="home_infodata.self_explain"
          type="textarea"
          :autosize="true"
          :rows="4"
          placeholder="自我介绍一下吧..."
        />
        <DescriptionList title="随心贴" layout="vertical" class="margin">
          <Description
            term=""
            v-for="(item, i) in home_infodata.posted"
            :key="i"
          >
            {{ item }}
          </Description>
        </DescriptionList>
        <Input
          v-model="posted"
          type="textarea"
          :autosize="true"
          :rows="4"
          placeholder="好词好句统统拿来..."
        />
        <Button style="margin-top: 20px" long @click="add_posted"
          >添加贴纸</Button
        >
        <Button style="margin-top: 20px" long @click="save_infodata"
          >保存数据</Button
        >
        <Button style="margin-top: 20px" long @click="show_modal = true"
          >清空贴纸</Button
        >
      </TabPane>
      <!-- 联系打赏 -->
      <TabPane label="联系+打赏" name="name3">
        <Select
          v-model="model_contact_reward"
          style="width: 100%"
          class="padding"
        >
          <Option
            v-for="item in optionList_contact_reward"
            :value="item.value"
            :key="item.value"
            >{{ item.value }}</Option
          >
        </Select>
        <Upload
          type="drag"
          action="//jsonplaceholder.typicode.com/posts/"
          :before-upload="get_upload_contact_reward"
          accept="image/*"
          class="padding"
        >
          <div style="padding: 20px 20px">
            <Icon
              type="ios-cloud-upload"
              size="52"
              style="color: #3399ff"
            ></Icon>
            <p>点击或者拖拽上传</p>
          </div>
        </Upload>

        <div
          class="demo-upload-list padding"
          v-for="(url, index) in home_infodata.contact_me"
          :key="index"
        >
          <Image :src="url" fit="cover" width="100%" height="100%" />
          <div class="demo-upload-list-cover">
            <Icon type="ios-eye-outline" @click="handleView(url)"></Icon>
            <Icon
              type="ios-trash-outline"
              @click="handleRemove_contact_me(url)"
            ></Icon>
          </div>
        </div>

        <div
          class="demo-upload-list padding"
          v-for="(url, index) in home_infodata.reward"
          :key="index"
        >
          <div>
            <Image :src="url" fit="cover" width="100%" height="100%" />
            <div class="demo-upload-list-cover">
              <Icon type="ios-eye-outline" @click="handleView(url)"></Icon>
              <Icon
                type="ios-trash-outline"
                @click="handleRemove_reward(url)"
              ></Icon>
            </div>
          </div>
        </div>

        <Button
          class="padding"
          style="margin: 20px 0"
          long
          @click="save_infodata"
          >保存数据</Button
        >
      </TabPane>
    </Tabs>
  </div>
</template>

<script>
import {
  PATH_homepage_bgimg,
  PATH_homepage_headphoto,
  PATH_homepage_info
} from '@/mylibs/define'
import { filetoBase64 } from '@/mylibs/functions'
import putBuffer from '@/api/API_Uploading_Directory_Tree'
export default {
  data() {
    return {
      set_website_time: '2022-09-23',
      posted: '',
      home_infodata: {
        set_website_time: null,
        self_explain: '',
        posted: [],
        contact_me: [],
        reward: []
      },
      optionList: [
        {
          value: '上传头像'
        },
        {
          value: '上传背景图'
        }
      ],
      optionList_contact_reward: [
        { value: '上传联系图片' },
        { value: '上传打赏图片' }
      ],
      model: '上传头像',
      model_contact_reward: '上传联系图片',
      show_modal: false
    }
  },

  methods: {
    datepicker_change(time) {
      this.set_website_time = time
    },
    // 上传头像,背景图
    async get_upload(file) {
      if (this.model == '上传头像') {
        filetoBase64(file, async (base64) => {
          var { res, ok, err } = await putBuffer(
            'put',
            PATH_homepage_headphoto,
            { img: base64 },
            false
          )
          if (ok) {
            this.$Notice.success({ desc: '上传成功' })
          } else {
            this.$Notice.error({ desc: '上传失败:' + err })
          }
        })
      } else if (this.model == '上传背景图') {
        filetoBase64(file, async (base64) => {
          var { res, ok, err } = await putBuffer(
            'put',
            PATH_homepage_bgimg,
            { img: base64 },
            false
          )
          if (ok) {
            this.$Notice.success({ desc: '上传成功' })
          } else {
            this.$Notice.error({ desc: '上传失败:' + err })
          }
        })
      } else {
        this.$Notice.info({ desc: '选择错误' })
      }

      return false
    },

    get_upload_contact_reward(file) {
      if (this.model_contact_reward == '上传联系图片') {
        filetoBase64(file, (base64) => {
          this.home_infodata.contact_me.push(base64)
        })
      } else if (this.model_contact_reward == '上传打赏图片') {
        filetoBase64(file, (base64) => {
          this.home_infodata.reward.push(base64)
        })
      } else {
        this.$Notice.info({ desc: '选择错误' })
      }
      return false
    },

    // 清空贴纸
    clear_posted() {
      this.home_infodata.posted = []
    },

    // 添加贴纸
    add_posted() {
      if (this.posted.length == 0) {
        this.$Notice.info({ desc: '你的输入为空哟~' })
        return
      }
      this.home_infodata.posted.unshift(this.posted)
      this.posted = ''
    },

    // 保存信息
    async save_infodata() {
      let year = this.set_website_time.split('-')[0]
      let month = this.set_website_time.split('-')[1]
      let day = this.set_website_time.split('-')[2]
      let date = new Date(year, month - 1, day)

      this.home_infodata.set_website_time = {
        year: date.getFullYear(),
        month: date.getMonth() + 1,
        day: date.getDate(),
        time_ms: date.getTime()
      }
      var { res, ok, err } = await putBuffer(
        'put',
        PATH_homepage_info,
        this.home_infodata,
        false
      )
      if (ok) {
        this.$Notice.success({ desc: '保存成功' })
      } else {
        this.$Notice.error({ desc: '保存失败:' + err })
      }
    },

    // 获取信息
    async get_infodata() {
      var { res, ok, err } = await putBuffer('get', PATH_homepage_info)
      if (ok) {
        if (res) {
          this.home_infodata = res
          if (res.set_website_time.month < 10)
            var month = '0' + res.set_website_time.month
          else {
            var month = res.set_website_time.month
          }
          if (res.set_website_time.day < 10)
            var day = '0' + res.set_website_time.day
          else {
            var day = res.set_website_time.day
          }
          this.set_website_time = '' + res.set_website_time.year + month + day
        }
      } else {
        this.$Notice.error({ desc: '获取主页信息失败:' + err })
      }
    },

    handleRemove_contact_me(url) {
      this.home_infodata.contact_me.splice(
        this.home_infodata.contact_me.indexOf(url),
        1
      )
    },

    handleRemove_reward(url) {
      this.home_infodata.reward.splice(
        this.home_infodata.reward.indexOf(url),
        1
      )
    },
    handleView(url) {
      this.$ImagePreview.show({
        previewList: [url]
      })
    }
  },

  created() {
    this.get_infodata()
  }
}
</script>

<style>
.demo-upload-list {
  display: inline-block;
  width: 60px;
  height: 60px;
  text-align: center;
  line-height: 60px;
  border: 1px solid transparent;
  border-radius: 4px;
  overflow: hidden;
  background: #fff;
  position: relative;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
  margin-right: 4px;
}
.demo-upload-list img {
  width: 100%;
  height: 100%;
}
.demo-upload-list-cover {
  display: none;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.6);
}
.demo-upload-list:hover .demo-upload-list-cover {
  display: block;
}
.demo-upload-list-cover i {
  color: #fff;
  font-size: 20px;
  cursor: pointer;
  margin: 0 2px;
}

.margin {
  margin: 10px 10px;
}

.padding {
  padding: 10px 10px;
}
</style>
